<template>
  <view class="page">
    <!-- 公共组件-每个页面必须引入 -->
    <public-module></public-module>
    <view class="u-padding-20" v-if="!userInfo.token">
      <u-empty text="请先登陆" mode="permission"></u-empty>
    </view>

    <view class="u-padding-20" v-else>
	  <!--u-loading-page :loading="loadstatus"></u-loading-page-->
      <view class="team-box u-flex-y">

            <view class="u-text-center u-flex-12">
              <u-count-to
                :start-val="0"
                :end-val="teaminfo.totalcount"
				color="#ffffff"
              ></u-count-to>
			</view>
			<view class="u-text-center  u-flex-12">总人数</view>
      </view>

      <view style="width: 100%; margin: 10rpx auto 30rpx auto">
 			<u-tabs
				:list="tabslist"
				:scrollable="false"
				:current="tabscurrent"
				@click="change"
				:inactiveStyle="{
						color: '#cccccc',
						transform: 'scale(1)'
					}"
				:activeStyle="{
						color: '#63E5CB',
						transform: 'scale(1.05)'
					}"
				lineHeight="3"
				lineColor="#63E5CB"
				itemStyle="height:45px;">
			</u-tabs>
      </view>

      <view v-if="tabscurrent == 1">
        <view v-if="upuid != ''" class="u-flex u-margin-20">
          <view class="u-flex-12"><u-button @click="gotonextpage(upuid, 'previous')" type="info" size="mini">返回上层</u-button></view>
        </view>
        <view class="u-flex-y u-flex-middle">
          <view
            style="
              background: #63e5cb;
              border-radius: 100%;
              width: 140rpx;
              height: 140rpx;
              margin: 30rpx auto;
              border: solid 2px #ffffff;
              color: #f7f8f9;
              padding: 20rpx 10rpx 5rpx 10rpx;">
            <view style="font-size: 40rpx;width: 110rpx;text-align: center;">{{ currentlevel }}</view>
            <view style="font-size: 22rpx;width: 110rpx;text-align: center;">当前层级</view>
          </view>
        </view>
      </view>

      <u-empty text="没有数据" mode="data" icon="https://i.yodin.com/storage/empty/data.png" :show="flow_list.length === 0" v-if="loadstatus == false"></u-empty>
      <view class="" v-if="flow_list.length > 0">
        <view class="base-panel-box" v-if="tabscurrent == 0">
          <view class="htitle">
            <view class="">圈子列表</view>
          </view>
          <view class="item" v-for="(item, index) in flow_list" :key="index">
            <u-row gutter="0" justify="space-between">
              <u-col span="2">
                <image
                  mode="scaleToFill"
                  :src="item.avatar_url"
                  style="width: 80rpx; height: 80rpx"
                ></image>
              </u-col>
              <u-col span="6" text-align="left">
                <view class="demo-layout bg-purple-light">
                  <view class="u-font-md u-type-error-dark">{{item.username}}</view>
                  <view class="u-font-sm">{{ item.belownum }}</view>
                </view>
              </u-col>
              <u-col span="4">
                <view><text class="u-font-sm">{{ item.add_time }}</text></view>
				<view>L{{ item.level_relatively }}</view>
              </u-col>
            </u-row>
          </view>
        </view>

        <view class="base-panel-box" v-if="tabscurrent == 1">
          <view class="htitle">
            <view class="">圈子列表</view>
          </view>
          <view class="item" v-for="(item, index) in flow_list" :key="index">
            <u-row gutter="0" justify="space-between">
              <u-col span="2">
                <image
                  mode="scaleToFill"
                  :src="item.avatar_url"
                  style="width: 80rpx; height: 80rpx"
                ></image>
              </u-col>
              <u-col span="6" text-align="left">
                <view class="demo-layout bg-purple-light">
                  <view class="u-font-md u-type-error-dark">{{ item.username}} ({{ item.belownum }})</view>

                </view>
                <view @click="gotonextpage(item.member_id, 'next')">显示</view>
              </u-col>
              <u-col span="4">
                <view><text class="u-font-sm">{{ item.add_time }}</text></view>
				<view>L{{ item.level_relatively }}</view>
              </u-col>
            </u-row>
          </view>
        </view>

		<u-loadmore  v-if="flow_list.length > 0" nomoreText="End" color="#dddddd" marginBottom="50" marginTop="50" :status="loadStatus" @loadmore="getflowlist" line></u-loadmore>

		
      </view>
    </view>
  </view>
</template>


<script>
import { mapState, mapMutations } from "vuex";
import { api_team_list,api_team_info } from '@/config/api.js';
export default {
  data() {
    return {
      flow_list: [],
      teaminfo: {
        totalcount: 0,
      },
      hasLogin: false,
      loadStatus: "loadmore",
      loadstatus: false,
      loadstxt: "loading...",
      page: 1,
      tabscurrent: 0,
      tabslist: [
        {
          name: "最新列表",
        },
        {
          name: "按层显示",
        },
      ],
      tabactivestyle: {},
      find_users_id: "",
      type: "",
      upuid: "",
      currentlevel: "",
    };
  },
  computed: {
    ...mapState(["userInfo"]),
  },
  onLoad(options) {
    // let query;
    // if(options.query){
    //       query=JSON.parse(options.query);
    // }
    this.find_users_id = this.userInfo.member_id;
    this.getteaminfo();
    this.getpagecontrac();
  },
  onReachBottom() {
    setTimeout(() => {
      if(this.loadStatus=='loadmore')this.getpagecontrac();
    }, 50);
  },
  onPullDownRefresh() {
    this.flow_list = [];
    this.page = 1;
    this.getpagecontrac();

    setTimeout(() => {
      uni.stopPullDownRefresh();
    }, 500);
  },
  methods: {
    change(index) {
		console.log(index)
      this.tabscurrent = index.index;
      this.page = 1;
      this.flow_list = [];
      this.upuid = "";
      if (this.tabscurrent == 0) {
        this.type = "";
        this.find_users_id = this.userInfo.member_id;
      }
      if (this.tabscurrent == 1) {
        if (this.type == "") this.type = "next";
      }

      this.getpagecontrac();
    },
    gotonextpage(uid, fs) {
      this.find_users_id = uid;
      this.type = fs;
	  let data = {
		  index:1
	  }
      this.change(data);
    },
    getteaminfo() {
		api_team_info({
			type:'msunline'
		}).then((res) => {
			this.teaminfo = res.teaminfo;
		}).catch((err) =>{})
    },
    getpagecontrac() {
		this.loadstatus = true

 			api_team_list({
			  page: this.page,
			  limit: 10,
			  find_users_id: this.find_users_id,
			  type: this.type,
			  upuid: this.upuid
			}).then((res) => {
				this.loadstatus = false
				this.upuid = res.upuid;
				this.currentlevel = res.currentlevel;

				if (res.count > 0) {
					if (this.page <= res.pages) {
						res.list.map((item) => {
							this.flow_list.push(item);
						})
						if (this.page==res.pages)this.loadStatus = "nomore";
					  this.page += 1;
					} else {
					  this.loadStatus = "nomore";
					}
				}
			}).catch((err) =>{})

    },
  },
};
</script>
<style lang="scss" scoped>
.team-box {
  background: $u-primary;
  color: $u-light-color;
  padding: 50rpx;
  border-radius: 20rpx;
}
</style>
